import React, {PureComponent} from 'react';
import {Link} from 'dva/router';

import moment from 'moment';
import {Table, Alert, Button, Tag, Badge, Avatar} from 'antd';

import styles from './index.less';

const statusMap = ['default', 'processing', 'error'];

class CashStandardTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };

    componentWillReceiveProps(nextProps) {
        // clean state
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }

    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        const totalCallNo = selectedRows.reduce((sum, val) => {
            return sum + parseFloat(val.callNo, 10);
        }, 0);

        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows);
        }

        this.setState({selectedRowKeys, totalCallNo});
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    }
    onCheckClick = (id) => {
        this.props.onCheckClick(id)
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['申请中', '已审核', '驳回'];

        const columns = [
            {
                title: '编号',
                dataIndex: 'id',

            },
            {
                title: '申请单号',
                dataIndex: 'order_no',

            },
            {
                title: '金额',
                dataIndex: 'money',
            },
            {
                title: '头像',
                dataIndex: 'avatar',
                render: (text, record) => (
                    <Avatar src={record.user.avatar}/>
                ),
            },
            {
                title: '用户',
                dataIndex: 'user_id',
                render: (text, record) => (
                    <Link to={`/manager/${text}`}>{record.user.name}</Link>
                ),
            },


            {
                title: '申请时间',
                dataIndex: 'created_at',
            },

            {
                title: '状态',
                dataIndex: 'status',
                filters: [
                    {
                        text: status[0],
                        value: 0,
                    },
                    {
                        text: status[1],
                        value: 1,
                    },
                    {
                        text: status[2],
                        value: 2,
                    },
                ],
                render(val) {
                    return <Badge status={statusMap[val]} text={status[val]}/>;
                },
            },
            {
                title: '打款时间',
                dataIndex: 'payed_at',
            },
            {
                title: '操作',
                dataIndex: 'action',
                render: (text, record) => (
                    <p>
                        <Button disabled={record.status != 0} onClick={() => {
                            this.onCheckClick(record)
                        }} type="primary">审核通过</Button>
                        <Button disabled={record.status != 0} style={{marginLeft: 8}} onClick={() => {
                            this.props.onUnCheckClick(record)
                        }} type="danger">驳回</Button>
                    </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: pagination.current,
            pageSize: pagination.size,
            total: pagination.total,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        return (
            <div className={styles.standardTable}>
                <div className={styles.tableAlert}>
                    <Alert
                        message={(
                            <p>
                                已选择 <a style={{fontWeight: 600}}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                                <a onClick={this.cleanSelectedKeys} style={{marginLeft: 24}}>清空</a>
                            </p>
                        )}
                        type="info"
                        showIcon
                    />
                </div>
                <Table
                    loading={loading}
                    rowKey={record => record.id}
                    rowSelection={rowSelection}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                />
            </div>
        );
    }
}

export default CashStandardTable;
